 //1.公用样式
 require('../../assets/css/index.js')
 //当前页面样式
 require('./courseDrill.less')

    //2.公用js
let dom=require('../../utils/dom.js');
let https=require('../../utils/https.js');
let local=require('../../utils/local.js');

    //3.当前页面效果
// console.log(dom);
//相当于文档加载事件
dom.ready(function(){

    let videosrc=dom.getById('#videosrc')//视屏
    let origin=dom.getById('.origin')//起点
    let destination=dom.getById('.destination')//终点
    let courseName=dom.getById('.course-name')//视屏name
    let lastAction=dom.getById('.last-action')//上一个节
    let suspend=dom.getById('.suspend')//暂停
    let nextMove=dom.getById('.next-move')//下一个节
    let meng=dom.getById('.meng')//蒙层
    let begin=dom.getById('.begin')//继续播放
    let finish=dom.getById('.finish')//结束------后面呢跳转


    // let contentvideo=dom.getById('.content-video')//渲染页面
    let contentvideo=document.querySelector('.content-video')//渲染页面
    let coursevideo=document.querySelector('.course-video')//渲染vido
    let coursetext=document.querySelector('.course-text')//text
    
    // 渲染页面
    function showpage(num){
        https.get('/api/train/courseList',function(res){
            if (res.errno==0) {
                let htmlstr=''
                let vidostr=''
                let id=local.get('id')
                // console.log(id);
                
                res.data.map(function(v,i){
                    // console.log(v);
                    
                    
                    if (v.courseId==id) {
                    //   console.log(v);
                    //   console.log(v.fragments);
                    //   console.log(v.fragments[0].title);
                    //   console.log(v.fragments[0].videoUrl);
                    //   console.log(v.frequency);
                    //   console.log(v.fragments.length);
                    //   console.log(https.BASE_URL+v.fragments[0].videoUrl);
                    console.log(i);
                        let num=i
                        // 加
                        nextMove.addEventListener('click',function(){
                           if (num<v.frequency) {
                             num=num+1
                           }else{
                            num=0
                           }
                        videosrc.src=https.BASE_URL+v.fragments[num].videoUrl
                        coursetext.innerHTML=htmlstr
                        })
                        // 减
                        lastAction.addEventListener('click',function(){
                            if (num>0) {
                              num=num-1
                            }else{
                             num=v.frequency
                            }
                         videosrc.src=https.BASE_URL+v.fragments[num].videoUrl
                         coursetext.innerHTML=htmlstr
                         })
                        htmlstr+=
                        `
                        <div class="course-num">
            
                            <span class="origin">${num}</span>
                            <span>/</span>
                            
                            <span class="destination">${v.frequency}</span>
                        </div>
                        <div class="course-name">${v.fragments[num].title}</div>
                        `
                        videosrc.src=https.BASE_URL+v.fragments[num].videoUrl
                        coursetext.innerHTML=htmlstr
                         
                        // 点击加蒙版   
                        suspend.addEventListener('click',function(){
                            videosrc.pause()
                            meng.classList.add('show-meng')
                    
                        })
                       
                    //   console.log(v.fragments[0].title);
                      
                    }


                  
                   
                    
                })
               
            
              
            }

        })
        


    }
    showpage()
    // 点击z暂停
    // suspend.addEventListener('click',function(){
    //     console.log(event.target);
        
    //     // let boxdata=event.target.parentNode
    //     // let val=boxdata.dataset['id']
    //     // console.log(event.target.className);
    //         // showpage()
    //         // videosrc.pause()
    //         // meng.classList.add('show-meng')

    // })
    // 点击继续播放
    begin.addEventListener('click',function(){
            videosrc.play() 
            meng.classList.remove('show-meng')

    })
    finish.addEventListener('click',function(){
            location.href='cour.html'

    })

    
})